<template>
  <div class="popular_merchants">
    <el-card>
      <template #header>
        <a>热门渔场VR全景 ></a>
      </template>
      <div v-for="merchant in fisherList" :key="merchant" class="shrimp">
        <el-row>
          <el-image :src="merchant.getIcon()" class="popular_shrimp" fit="fill">
            <template #placeholder>
              <div class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </template>
          </el-image>
        </el-row>
        <el-row>
          <span class="shrimp_name" v-if="merchant.getPosition() !== undefined">
            [{{ merchant.getPosition() }}]
          </span>
          <span class="shrimp_name">{{ merchant.getName() }}</span>
        </el-row>
      </div>
      <div v-if="fisherList.length === 0" class="shrimp">
        <el-empty description="呀！暂时没有符合条件的渔场"></el-empty>
      </div>
    </el-card>
  </div>
</template>

<script>
import Merchant from "@/pojo/Merchant";

export default {
  name: "PopularMerchants",
  data() {
    return {
      fisherList: [
        new Merchant()
            .setIcon(require("@/assets/popularMerchant/merchant1.png"))
            .setName("通州湾海洋经济产业园工厂化养殖基地")
            .setPosition("江苏 如东"),
        new Merchant()
            .setIcon(require("@/assets/popularMerchant/merchant2.png"))
            .setName("南京智循环水产养殖基地")
            .setPosition("江苏 南京"),
        new Merchant()
            .setIcon(require("@/assets/popularMerchant/merchant3.png"))
            .setName("江苏条子泥垦区滨海养殖基地")
            .setPosition("江苏 东台")
      ]
    };
  }
};
</script>

<style scoped>

.popular_shrimp {
  width: 100%;
  height: 210px;
  padding-bottom: 10px;
  margin-right: 40px;
}

.shrimp {
  float: left;
  width: 280px;
  height: 300px;
  cursor: pointer;
}

.popular_merchants {
  margin-bottom: 10px;
}

.shrimp_name {
  margin-bottom: 10px;
  font-size: 14px;
  width: 85%;
}
</style>